$pri_color: #8A95B1;
$sub_color: #F1F4FD;
/* Global */
html, body {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-family: "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",Arial,Helvetica,sans-serif !important;
}

/* Passport */
.c-login{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top:6%;
  width: 100%;
  height: 100%;
  background-color: #f2f2fd;
  .g-panel{
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99;
    .m-title{
      margin-bottom: 30px;
      width:200px;
      height:80px;
      background: url('../resources/logo.png') center/contain no-repeat;
    }
    .m-box{
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 50px;
      min-height: 230px;
      background-color: #fff;
      box-shadow: rgba(70, 70, 70, 0.48) 1px 1px 3px 1px;
      .u-field{
        display:flex;
        flex-direction: row;
        align-items: center;
        margin-top:10px;
        width:100%;
        height:35px;
        border-bottom: 1px solid #b8b8b8;
        .text-box{
          margin-bottom:20px;
          max-width:400px;
          height:230px;
          font-size: 12px;
          color: #666;
          overflow-y: auto;
        }
        .u-field-icon{
          width: 16px;
          height: 16px;
        }
        .f-icon-phone{
          background: url("../resources/icon-phone.png") center/contain no-repeat;
        }
        .f-icon-password{
          background: url("../resources/icon-password.png") center/contain no-repeat;
        }
        .f-icon-authcode{
          background: url("../resources/icon-authcode.png") center/contain no-repeat;
        }
        .u-field-input{
          flex: 1;
          margin-left:10px;
          padding-right:20px;
          width: 300px;
          border:0;
          box-shadow: 0;
          font-size: 12px;
        }
        .u-field-input-auth{
          width: 200px !important;
        }
        .u-field-input[placeholder] {
          color:#b2b2b2 !important;
        }
        .u-field-send{
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top:-5px;
          width: 90px;
          height: 30px;
          font-size: 12px;
          color: #fff;
          background-color: #8a95b3;
          cursor: pointer;
          &:hover{
            background-color: #68728b;
          }
        }
      }
      .u-link{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top:15px;
        width:100%;
        font-size: 12px;
        .u-link-forget{
          color: #f97a5b;
          transition: .2s all ease-in;
          &:hover{
            color: #c3624c;
          }
        }
        .u-link-register{
          color: #62bcc0;
          transition: .2s all ease-in;
          &:hover{
            color: #3c7579;
          }
        }
      }
      .u-agree{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top:15px;
        width:100%;
        font-size: 12px;
        .u-agree-box{
          margin-top:2px;
          margin-right:10px;
          border-radius: 0;
          background-color: #fff;
        }
        .u-agree-link{
          padding:0 2px;
          color: #f97a5b;
        }
      }
      .u-btn{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top:15px;
        margin-bottom:20px;
        width:100%;
        height:34px;
        background-color: #8a95b3;
        transition: .2s all ease-in;
        cursor: pointer;
        .u-btn-login{
          width:40px;
          height:20px;
          background: url("../resources/login-text.png") center/contain no-repeat;
        }
        .u-btn-register{
          width:40px;
          height:20px;
          background: url("../resources/register-text.png") center/contain no-repeat;
        }
        &:hover{
          background-color: #68728b;
        }
      }
    }
  }
  &:before{
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 44%;
    background-color: #8a95b3;
  }
}
.c-login-back{
  &:before{
    top:0;
    background: #8a95b3 url("../resources/back.png") center/cover no-repeat;
  }
}

/* End Passport */

/* 404&500 */
.c-404500 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f2f2fd;
  .box404{
    width: 500px;
    height: 277px;
    background: url("../resources/404.png") center/cover no-repeat;
  }
  .box500{
    width: 500px;
    height: 277px;
    background: url("../resources/500.png") center/cover no-repeat;
  }
}
/* End 404&500 */
